<template>
  <div class="blackView" v-loading="Loading">
    <Map
      :load="getMap1Area"
      :map-center="mapsCenterWkt"
      :zoom="12"
      class="blackView"
    ></Map>
    <!-- <div>
      <LeftTip :act="1" :tab="1"></LeftTip>
    </div> -->
    <div class="updownBtnBox" >
      <div :class="`mode-btn-box ${selectType == 1 ? 'mode-select-box' : ''}`" @click="changeUpDownFun(1)">早高峰</div>
      <div :class="`mode-btn-box ${selectType == 2 ? 'mode-select-box' : ''}`" @click="changeUpDownFun(2)">晚高峰</div>
    </div>
    <div class="infoWindow" v-show="showInfowindow">
      <div class="topTitle">
        <span class="fileName">
          <span class="titleImg">
          </span>
          <span>{{ fileName }}</span>
        </span>
        <span class="closeInfoWindow" @click="closeInfowindow">+</span>
      </div>
      <div class="windowBody">
        <div class="bodySelect">
          <div
            :class="['selOption', `${select == 1 ? 'isSelect' : ''}`]"
            @click="selectFast(1)"
          >
            720全景
          </div>
          <div
            :class="['selOption', `${select == 2 ? 'isSelect' : ''}`]"
            @click="selectFast(2)"
          >
            视频
          </div>
          <div
            :class="['selOption', 'notSelect', `${select == 3 ? 'isSelect' : ''}`]"
            @click="selectFast(3)"
          >
            倾斜摄影
          </div>
        </div>
        <div class="satus_right" v-show="select == 1">
          <!-- <el-form>
            <el-form-item label="">
              <el-radio-group class="elGroup" v-model="tabPosition" @change="getSelList">
                <el-radio-button v-for="item in setInfo" :key="item.picture" :label="item.indef">
                  <span>节点{{ item.indef }}</span>
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form> -->
          <div class="stbox">
            <div class="imgBox" v-show="showType == 2">
              <iframe class="arroundImg" v-if="srcImg" :src="srcImg" frameborder=0 allowfullscreen ref="previewImg"></iframe>
              <div class="notImg" v-if="!srcImg">
                无
              </div>
              <!-- <el-image
                v-if="select == 1"
                :src="srcImg"
                class="arroundImg"
                :preview-src-list="srcList"
                ref="previewImg"
                :preview-teleported="true"
                @error="showErrorImg"
                >
              </el-image> -->
              <!-- <el-image
                v-for="(image, index) in imageList"
                :key="index"
                class="arroundImg"
                :src="image.url"
                :preview-src-list="imageList.map(img => img.url)"
                @error="showErrorImg"
              ></el-image> -->
              <!-- <i @click="allSelect" class="el-icon-full-screen"></i> -->
            </div>
          </div>
        </div>
        <div class="satus_left" v-show="select == 2">
          <div class="imgBox">
            <video class="video" :src="src" disablePictureInPicture controlslist="nodownload noremoteplayback noplaybackrate" controls></video>
          </div>
        </div>
      </div>
    </div>
    <div class="sample">
      <el-checkbox-group v-model="checkList" @change="checkClick">
        <el-checkbox label="流量预测"></el-checkbox>
        <el-checkbox label="拥堵点位"></el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="example">
      <p>流量图例</p>
      <div class="box">
        <div class="colorBoxH colorGdp"></div>
        <div>{{ firstDeti }}</div>
      </div>
      <div class="box">
        <div class="colorBoxH colorGre"></div>
        <div>{{ secondDeti }}</div>
      </div>
      <div class="box">
        <div class="colorBoxH colorYel"></div>
        <div>{{ thirdDeti }}</div>
      </div>
      <div class="box">
        <div class="colorBoxH colorRed"></div>
        <div>{{ fourDeti }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '@/components/map1.vue'
import LeftTip from './tab/leftTip.vue'
import{
  getRidList,
  getPoint
} from '@/api/api.js';
export default {
  name: 'flow',
  components: {
    Map,
    LeftTip
  },
  data() {
    return {
      firstDeti: '<=150',
      secondDeti: '>150 <=540',
      thirdDeti: '>540 <=900',
      fourDeti: '>900',
      mapsCenterWkt: [120.222245,30.241048],
      polyLineList: [],
      selectType: 1,
      arrowClick: true,
      preData: [],
      aftData: [],
      Loading: false,
      infoWindow: null,
      removeMarkers: [],
      fileName: '',
      showInfowindow: false,
      tabPosition: '0',
      select: 1,
      openIcon: false,
      showType: 2,
      message: '',
      value: '1',
      src: '',
      srcImg: '',
      srcList: [],
      allPoints: [],
      checkList: ['流量预测']
    }
  },
  async created(){
    let res = await getRidList({ type: 1 })
    if(res.data.data){
      this.preData = res.data.data
    }
    getRidList({ type: 2 }).then(tre => {
      if(tre.data.data){
        this.aftData = tre.data.data
      }
    })
  },
  mounted(){
    this.Loading = true
  },

  methods: {
    openTrue(val) {
      console.log('切换', val)
      this.select = 1;
      
      this.getTurnFlowHours(this.interId)
      this.getVideo(this.interId)
    },
    setSelect(flag){
      this.select = 1
      this.openIcon = flag
    },
    selectFast(type) {
      if(type == 1){
        this.showReact = false
        this.select = 1
      } else if(type == 2){
        // this.value = "1"
        if(this.showType == 1){
          this.showReact = true   
        } else {
          this.showReact = false
        }
        this.select = 2
      }
    },
    getMap1Area(){
      let timer = setInterval(() => {
        if(this.preData.length){
          this.changeUpDownFun(1, true)
          this.getPoints()
          clearInterval(timer)
        }
      }, 50)
    },
    async changeUpDownFun(type, flag = false){
      console.log(this.selectType, type, this.arrowClick)
      if(!this.arrowClick){
        return
      }
      this.Loading = true
      this.removePolyLineList()
      if(type == this.selectType && !flag){
        this.selectType = 0
        this.Loading = false
        return
      }
      this.selectType = type
      if(!this.checkList.includes('流量预测')){ // 如果流量预测没选中就不让渲染
        this.Loading = false
        return
      }
      this.arrowClick = false
      if(type == 1){
        let timer = setInterval(() => {
          if(this.preData.length){
            clearInterval(timer)
            this.setLine(this.preData)
          }
        }, 20)
      }
      if(type == 2){
        let timer = setInterval(() => {
          if(this.aftData.length){
            clearInterval(timer)
            this.setLine(this.aftData)
          }
        }, 20)
      }
      setTimeout(() => {
        this.arrowClick = true
      })
    },
    getPoints(){
      getPoint().then(res => {
        console.log(res.data.data)
        if(res.data.data && res.data.data.length){
          this.allPoints = res.data.data
        }
      })
    },
    setPoint(data) {
      data.forEach((item, index) => {
        let centerWkt = item.wkt.split(",");
        let marker = new AMap.Marker({
          position: new AMap.LngLat(centerWkt[0], centerWkt[1]),
          content: this.getCrossDisInfoMarkerIcon(index, item.color_type, item),
          offset: new AMap.Pixel(-10, -10),
        });
        window.map1.add(marker);
        this.removeMarkers.push(marker);
      });
    },
    getCrossDisInfoMarkerIcon(index, type, item) {
      let crossClass = "";
      switch (type) {
        case 1:
          crossClass = "crossAreaA";
          break;
        case 2:
          crossClass = "crossAreaB";
          break;
        case 3:
          crossClass = "crossAreaC";
          break;
      }
      let el = document.createElement("div");
      // el.className = `crossArea ${crossClass}`;
      // el.innerHTML = '+'
      el.className = `crossBox ${crossClass}`;
      el.tabIndex = index;
      el.addEventListener("click", (e) => {
        // this.showType = item.type
        this.fileName = item.name
        this.showInfo(item);
      });
      el.addEventListener('mouseenter', this.debounce(
        ()=> {
          this.infoWindow && this.infoWindow.close()
          let wkt = item.wkt.split(',')
          if(item.name){
            let infoWindowContent = `<div class="input-item">${item.name}</div>`
            this.infoWindow = new AMap.InfoWindow({
            // anchor: 'center',
              position: new AMap.LngLat(wkt[0], wkt[1]),
              offset: new AMap.Pixel(10, -40),
              content: infoWindowContent
            })
            this.infoWindow.open(window.map1)
          }
        }, 200)
      )
      el.addEventListener('mouseout', this.debounce(() => {
        this.infoWindow && this.infoWindow.close()
      }, 200))
      // el.innerHTML = `<div class="crossAreaText">${item.volume}</div>`;
      el.id = `id_${index}`;
      return el;
    },
    showInfo(item) {
      this.select = 1;
      this.value = "1";
      this.interId = item.id
      this.showInfowindow = true
      // this.srcList = []
      this.srcImg = item.picture_url
      this.src = item.od_video_url
      console.log(this.srcImg, this.src)
      this.message = ''
      // this.tabPosition = '0'
      if (window.map1) {
        window.map1.on("click", this.closeInfowindow);
      }
      // this.getTurnFlowHours(this.interId)
      // this.getInterInfo()
      // this.getVideo(this.interId)
    },
    closeInfowindow() {
      this.showInfowindow = false
      this.src = ''
      this.srcImg = ''
      this.select = 0
      this.showType = 2
      window.map1.off("click", this.closeInfoWindow)
    },
    debounce(func, wait) {
      let timeout;
      return function() {
        const context = this;
        const args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    },
    showErrorImg(e){
      this.$nextTick(() => {
        document.querySelector('.el-image__error').innerHTML = '无'
      })
    },
    async setLine(data){
      if(window.location.href.indexOf('flow') == '-1') return
      await data.forEach(item => {
        let lineColor = ''
        if(item.type == 1){
          lineColor = '#e11702'
        }else if(item.type == 2){
          lineColor = '#ee9b00'
        } else if(item.type == 3){
          lineColor = '#1ac72e'
        } else if(item.type == 4){
          lineColor = '#028711'
        }
        let wkt = item.wkt.split(';')
        let wkts = []
        wkt.forEach(key => {
          wkts.push(key.split(','))
        })
        let polyLine = new AMap.Polyline({
          path: wkts,
          isOutline: false,
          outlineColor: '#ffeeff',
          borderWeight: 1,
          strokeColor: lineColor,
          strokeOpacity: 1,
          strokeWeight: 3,
          // 折线样式还支持 'dashed'
          strokeStyle: "solid",
          // strokeStyle是dashed时有效
          strokeDasharray: [10, 5],
          lineJoin: 'round',
          lineCap: 'round',
          zIndex: 149,
          cursor: 'pointer',
          showDir: false
        })
        polyLine.on('mouseover', this.debounce(
        (e)=> {
          this.infoWindow && this.infoWindow.close()
          let wkt = [e.lnglat.lng, e.lnglat.lat]
          if(item.volume){
            let infoWindowContent = `<div class="input-volume">流量: ${item.volume}</div>`
            this.infoWindow = new AMap.InfoWindow({
            // anchor: 'center',
              position: new AMap.LngLat(wkt[0], wkt[1]),
              offset: new AMap.Pixel(0, -5),
              content: infoWindowContent
            })
            this.infoWindow.open(window.map1)
          }
        }, 50))

        polyLine.on('mouseout', this.debounce(() => {
          this.infoWindow && this.infoWindow.close()
        }, 50))
      
        window.map1.add(polyLine)
        this.polyLineList.push(polyLine)
      })
      setTimeout(() => {
        this.$nextTick(() => {
          this.Loading = false
        })
      })
    },
    removePolyLineList(type){
      this.polyLineList.forEach(item => {
        window.map1.remove(item)
      })
      this.polyLineList = []
    },
    removeAllMarkers(){
      if(this.removeMarkers.length){
        this.removeMarkers.forEach(item => {
          window.map1.remove(item)
        })
      }
    },
    checkClick(){
      this.Loading = true
      console.log(this.checkList)
      if(this.checkList.length == 0){
        this.removePolyLineList()
        this.removeAllMarkers()
      } else if(this.checkList.length == 2 ){
        if(this.selectType == 1){
          if(this.preData.length){
            this.setLine(this.preData)
          }
        }
        if(this.selectType == 2){
          if(this.aftData.length){
            this.setLine(this.aftData)
          }
        }
        this.setPoint(this.allPoints)
      } else {
        if(this.checkList.includes('流量预测')){
          this.removeAllMarkers()
          if(this.selectType == 1){
            if(this.preData.length){
              this.setLine(this.preData)
            }
          }
          if(this.selectType == 2){
            if(this.aftData.length){
              this.setLine(this.aftData)
            }
          }
        }
        if(this.checkList.includes('拥堵点位')){
          this.removePolyLineList()
          this.setPoint(this.allPoints)
        }
      }
      this.Loading = false
    }
  },
  beforeDestroy(){
    window.map1.clearMap()
  }
}
</script>

<style lang="less" scoped>
.updownBtnBox{
  position: fixed;
  bottom: 150px;
  left: 0;
  right: 0;
  width: 100vw;
  text-align: center;
  z-index: 2;
  .mode-btn-box {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    width: 106px;
    height: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    border-radius: 10px;
    color: #FFF;
    background: linear-gradient(6deg, rgba(20, 24, 27, 0.11) 0%, rgba(225, 224, 206, 0.44) 100%) ;
    box-shadow: 0px 0 7px 0px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(95, 101, 111, 0.93) ;
    -webkit-backdrop-filter: blur(16.2px);
    backdrop-filter: blur(16.2px);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
  }
  .mode-select-box{
    border: 1px solid #FFBF39;
    background: linear-gradient(180deg, rgba(255, 171, 0, 0.26) 0%, rgba(255, 177, 0, 0) 100%), linear-gradient(180deg, rgba(255, 171, 0, 0.23) 0%, rgba(255, 177, 0, 0) 100%);
  }
}
.infoWindow {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1060px;
  height: 600px;
  z-index: 110;
  transform: translate(-50%, -50%);
  .topTitle {
    position: relative;
    height: 30px;
    // background: linear-gradient(
    //   to bottom,
    //   rgba(11, 69, 138, 0.8) 5%,
    //   rgba(3, 77, 134, 0.8) 45%,
    //   rgba(16, 47, 88, 0.8) 55%,
    //   rgba(0, 44, 105, 0.8) 70%,
    //   rgba(6, 66, 115, 0.8) 90%,
    //   rgba(8, 105, 197, 0.8) 100%
    // );
    background: linear-gradient(
      to right,
      rgb(70, 151, 234) 0%,
      rgb(37, 67, 185) 50%,
      rgb(48, 84, 198) 100%
    );
    .fileName{
      color: #FFF;
      display: inline-block;
      line-height: 30px;
      margin-left: 10px;
      font-size: 16px;
      display: flex;
      .titleImg{
        width: 20px;
        height: 25px;
        background: url(../assets/img/baogaoBg.png);
        background-position: -261px -29px;
        display: block;
      }
    }
    .closeInfoWindow {
      position: absolute;
      top: 6px;
      right: 6px;
      display: inline-block;
      font-size: 21px;
      line-height: 16px;
      color: #fff;
      transform: rotate(45deg);
      cursor: pointer;
    }
  }
  .windowBody {
    background: rgb(44, 68, 135);
    height: calc(100% - 30px);
    padding: 14px 14px 8px 14px;
    box-sizing: border-box;
    .bodySelect {
      display: flex;
      .selOption {
        font-weight: 800;
        border: 1px solid #649cdc;
        margin-left: 6px;
        padding: 4px 10px;
        box-sizing: border-box;
        color: #FFF;
        background: rgba(108, 169, 226, 0.33);
        cursor: pointer;
      }
      .selOption:nth-child(1){
        margin-left: 0px;
      }
      .isSelect {
        background: #3889de;
        color: #fff;
      }
      .notSelect{
        border: 1px solid #4a74a3;
        color: #a29b9b;
        cursor: not-allowed;
      }
      .isSelect /deep/ .invert {
        background: #3889de;
        color: #fff;
        .el-input__inner::placeholder {
          color: #fff;
        }
        .el-input__inner {
          color: #fff;
        }
      }
    }
    .satus_left {
      width: 100%;
      height: calc(100% - 40px);
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .imgBox{
        width: 100%;
        height: calc(100% - 8px);
        box-sizing: border-box;
        img{
          width: 100%;
          height: 100%;
          background-size: cover;
        }
      }
      .video{
        width: 100%;
        height: 100%;
        background-size: cover;
        outline: 0;
        background-color: rgb(51, 51, 51);
      }
      .rightCanvas{
        width: calc(50% - 3px);
        height: calc(100% - 3px);
        display: flex;
        align-items: center;
        .canvasBox{
          display: flex;
          justify-content: center;
          width: 100%;
          margin-top: 0px;
        }
      }
    }
    .satus_right {
      width: 100%;
      height: calc(100% - 40px);
      margin-top: 12px;
      .stbox{
        display: flex;
        justify-content: space-between;
        height: 100%;
      }
      & /deep/ .el-form-item{
        margin-bottom: 12px;
      }
      & /deep/ .el-input__inner{
        height: 32px;
        color: #FFF;
        border-radius: 4px;
        color: #333333;
        // border-image: linear-gradient(90deg, rgba(95, 101, 111, 0.93), rgba(151, 151, 151, 0)) 1 1;
        background: #F5F6F8;
      }
      & /deep/ .area .el-input__inner{
        padding: 0 0 0 10px;
        border-radius: 0;
      }
      & /deep/ .elGroup .el-radio-button .el-radio-button__inner{
        border-right: none;
      }
      & /deep/ .elGroup .el-radio-button:last-child .el-radio-button__inner{
        border-right: 1px solid #949494;
      }
      & /deep/ .el-radio-button__inner{
        height: 32px;
        border-radius: 1px;
        border: 1px solid #949494;
        color: #FFF;
        box-shadow: none;
        transition: all 0s;
        background: transparent;
        outline: none;
        display: flex;
        align-items: center;
        padding: 4px 6px;
      }
      & /deep/ .is-active .el-radio-button__inner{
        background: #3889de;
      }
      .imgBox{
        width: 100%;
        height: calc(100% - 8px);
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        .arroundImg{
          width: 100%;
          height: 100%;
          background-size: cover;
          display: block;
          border: none;
          & /deep/ .el-image__error{
            font-size: 20px;
          }
        }
        .notImg{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          color: #FFF;
          font-size: 24px;
          background: #989898;
        }
        .el-icon-full-screen{
          position: absolute;
          z-index: 101;
          right: 10px;
          bottom: 10px;
          font-size: 24px;
          cursor: pointer;
          pointer-events: auto;
        }
      }
      .imgBox::-webkit-scrollbar {
        width: 6px;
        background-color: transparent;
      }
      .imgBox::-webkit-scrollbar-thumb{
        border-radius: 5px;
        width: 6px;
        background-color: #1b4e88;
      }
      .rightInfo{
        background: rgba(12, 36, 66, 0.8);
        width: calc(50% - 4px);
        height: calc(100% - 4px);
        padding: 10px;
        box-sizing: border-box;
        color: #FFF;
        font-size: 16px;
        line-height: 22px;
      }
      
    }
  }
}
.sample{
  width: 140px;
  height: 90px;
  background: rgba(38, 52, 68, 0.88);
  position: fixed;
  right: 42px;
  top: 140px;
  z-index: 99;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.22);
  border: 2px solid rgba(95, 101, 111, 0.9);
  & /deep/ .el-checkbox{
    color: #FFF;
    line-height: 26px;
    .el-checkbox__inner{
      background: transparent;
    }
    .el-checkbox__inner{
      border-color: rgb(1, 255, 254);
    }
    .el-checkbox__inner:hover{
      border-color: rgb(1, 255, 254);
    }
    .el-checkbox__input.is-focus .el-checkbox__inter{
      border-color: rgb(1, 255, 254);
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: transparent;
      border-color: rgb(1, 255, 254);
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color: #FFF;
    }
    .el-checkbox__label{
      font-size: 16px;
      font-weight: 500;
    }
  }
}
.example{
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #2e2d2d;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .22);
  border: 2px solid rgba(95, 101, 111, .9);
  z-index: 100;
  padding: 12px;
  width: 180px;
  height: 206px;
  box-sizing: border-box;
  color: #FFF;
  font-size: 16px;
  border-radius: 6px;
  .box{
    display: flex;
    align-items: center;
    text-align: left;
    line-height: 32px;
  }
  p{
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  .colorBoxH{
    width: 30px;
    height: 4px;
    margin-right: 20px;
    text-align: center;
    line-height: 18px;
    color: #000;
    font-weight: 700;
    font-size: 16px;
  }
  .colorGdp{
    background: #028711;
  }
  .colorGre{
    background: #1ac72e;
  }
  .colorYel{
    background: #ee9b00;
  }
  .colorRed{
    background: #e11702;
  }
}
</style>